<template>
    <div class="app-container dialog">
        <div class="title">新增上云系统</div>
        <div class="msg">
            <el-form
                :model="cloudSystem"
                ref="cloudSystem"
                style="width: 100% !important"
                :rules="rules"
                label-width="120px"
            >
                <div class="wrap" style="margin-top: 20px">
                    <div class="item">
                        <el-form-item label="系统名称:" prop="projectname">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入系统名称"
                                v-model="cloudSystem.projectname"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="上线时间:" prop="onlinetime">
                            <el-date-picker
                                v-model="cloudSystem.onlinetime"
                                type="date"
                                style="width: 200px"
                                clearable
                                value-format="yyyy-MM-dd"
                                placeholder="请选择上线时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="业务部门:" prop="officeId">
                            <el-cascader
                                :props="{ value: 'id', checkStrictly: true }"
                                :show-all-levels="false"
                                @change="deptChange"
                                style="width: 200px"
                                placeholder="请选择，可搜索"
                                :options="dept"
                                clearable
                                filterable
                            ></el-cascader>
                        </el-form-item>
                    </div>
                </div>
                <div class="wrap">
                    <div class="item">
                        <el-form-item label="业主方联系人:" prop="contacts">
                            <el-select
                                clearable
                                style="width: 200px"
                                v-model="cloudSystem.contacts"
                                :placeholder="
                                    cloudSystem.officeId
                                        ? '请选择业主方联系人'
                                        : '请先选择业务部门'
                                "
                            >
                                <el-option
                                    v-for="item in users"
                                    :key="item.userName"
                                    :label="item.nickName"
                                    :value="item.userName"
                                >
                                </el-option>
                            </el-select>
                            <!-- <el-input
                         style="width: 200px"
                         size="mini"
                         placeholder=""
                         v-model="cloudSystem.contacts"
                         clearable>
                       </el-input> -->
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="联系电话:" prop="contactsinfo">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入联系电话"
                                v-model="cloudSystem.contactsinfo"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="邮箱:" prop="email">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入邮箱"
                                v-model="cloudSystem.email"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="wrap">
                    <div class="item">
                        <el-form-item label="承建单位:" prop="constunit">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请选择承建单位"
                                v-model="cloudSystem.constunit"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="wrap">
                    <div class="item">
                        <el-form-item label="承建方联系人:" prop="constcts">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入承建方联系人"
                                v-model="cloudSystem.constcts"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="联系电话:" prop="constctsinfo">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入联系电话"
                                v-model="cloudSystem.constctsinfo"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="item">
                        <el-form-item label="邮箱:" prop="constemail">
                            <el-input
                                style="width: 200px"
                                size="mini"
                                placeholder="请输入邮箱"
                                v-model="cloudSystem.constemail"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>

                <div class="item" style="width: calc(100% - 20px)">
                    <el-form-item
                        label-width="200px"
                        label="系统建设（运维）资金来源:"
                        prop="fundFromRadio"
                    >
                        <el-radio-group v-model="cloudSystem.fundFromRadio">
                            <el-radio label="1">区（县）</el-radio>
                            <el-radio label="2">市级</el-radio>
                            <el-radio label="3">
                                <el-input
                                    style="width: 200px"
                                    size="mini"
                                    placeholder="请输入其他资金来源"
                                    v-model="cloudSystem.fundFrom"
                                    clearable
                                >
                                </el-input>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="item" style="width: calc(100% - 20px)">
                    <el-form-item
                        style="width: 100%"
                        label-width="200px"
                        label="自行落实部门上云经费:"
                        prop="fundBySelf"
                    >
                        <el-radio-group v-model="cloudSystem.fundBySelf">
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="item" style="width: calc(100% - 20px)">
                    <el-form-item
                        style="width: 100%"
                        label="项目简介:"
                        prop="introduction"
                    >
                        <el-input
                            type="textarea"
                            style="width: 100%"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入项目简介"
                            v-model="cloudSystem.introduction"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                <div class="item" style="width: calc(100% - 20px)">
                    <el-form-item
                        style="width: 100%"
                        label="申请理由:"
                        prop="remarks"
                    >
                        <el-input
                            type="textarea"
                            style="width: 100%"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入申请理由"
                            v-model="cloudSystem.remarks"
                        >
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
            <el-button  type="primary" @click="next"
                >提交</el-button
            >
            <el-button  @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
import { cloudUpList, cloudUpConfInfo, addCloudUp } from "@/api/cloud/cloud";
import { treeselect } from "@/api/system/dept";
import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { getDicts } from "@/api/system/dict/data";
import Add from "./add.vue";
import Detail from "../resources/apply/addC.vue";

import { listUser2 } from "@/api/system/user";
export default {
    name: "AddCloudStstem",
    components: {},
    // props: {
    //     dept: {
    //         type: Array,
    //         default: [],
    //     },
    // },
    data() {
        var validateFundFrom = (rule, value, callback) => {
            if (value === "3") {
                if (this.cloudSystem.fundFrom) {
                    callback();
                } else {
                    callback(new Error("请输入其他资金来源"));
                }
            } else if (value === "") {
                callback(new Error("请选择系统建设（运维）资金来源"));
            } else {
                callback();
            }
        };
        return {
            //用户列表
            users: [],
            cloudSystem: {
                projectname: "", //系统名称
                officeId: "", //业务部门Id
                officeName: "", //业务部门名称
                onlinetime: "", //上线时间

                contacts: "", //联系人id
                contactsNickName: "", //联系人名称
                contactsinfo: "", //联系电话
                email: "", //联系邮箱

                constunit: "", //承建单位
                constcts: "", //承建联系人姓名
                constctsinfo: "", //承建联系方式
                constemail: "", //承建邮箱

                fundFromRadio: "", //系统建设（运维）资金来源选择
                fundFrom: "", //系统建设（运维）资金来源  最终值
                fundBySelf: "", //自行落实部门上云经费

                introduction: "", //项目简介
                constunit: "", //承建单位
                remarks: "", //申请理由
            },
            isIndeterminate: true,
            checkAll: false,
            rules: {
                projectname: [
                    {
                        required: true,
                        message: "请输入系统名称",
                        trigger: "blur",
                    },
                ],
                officeId: [
                    {
                        required: true,
                        message: "请选择业务部门",
                        trigger: "change",
                    },
                ],
                onlinetime: [
                    {
                        required: true,
                        message: "请选择上线时间",
                        trigger: "change",
                    },
                ],
                contacts: [
                    {
                        required: true,
                        message: "请选择业主方联系人",
                        trigger: "change",
                    },
                ],
                contactsinfo: [
                    {
                        required: true,
                        message: "请输入业主方联系电话",
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        required: true,
                        message: "请输入业主方联系邮箱",
                        trigger: "blur",
                    },
                ],

                constunit: [
                    {
                        required: true,
                        message: "请输入承建单位",
                        trigger: "blur",
                    },
                ],
                constcts: [
                    {
                        required: true,
                        message: "请输入承建方联系人",
                        trigger: "blur",
                    },
                ],
                constctsinfo: [
                    {
                        required: true,
                        message: "请输入承建方联系人电话",
                        trigger: "blur",
                    },
                ],
                constemail: [
                    {
                        required: true,
                        message: "请输入承建方联系人邮箱",
                        trigger: "blur",
                    },
                ],
                fundFromRadio: [
                    {
                        required: true,
                        validator: validateFundFrom,
                        trigger: "change",
                    },
                ],
                fundBySelf: [
                    {
                        required: true,
                        message: "请选择是否自行落实部门上云经费",
                        trigger: "change",
                    },
                ],
                introduction: [
                    {
                        required: true,
                        message: "请输入项目简介",
                        trigger: "blur",
                    },
                ],
                remarks: [
                    {
                        required: true,
                        message: "请输入申请理由",
                        trigger: "blur",
                    },
                ],
            },
            input2: 0,
            //配置
            configure: {
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                yyaqList: [], //安全产品
            },
            //部门列表树结构
            dept: [],
        };
    },
    created() {
        this.getDataOfAdd();
        this.getListDept();
    },
    methods: {
        //部门列表
        getListDept() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
        },
        //获取一些配置数据
        getDataOfAdd() {
            //可用域
            getDicts("available_domain").then((response) => {
                this.configure.available_domain = response.data;
            });
            //服务商
            getDicts("cloud_service_provider").then((response) => {
                this.configure.cloud_service_provider = response.data;
            });
            //盘类型
            serviceByClazz({ code: "cc" }).then((response) => {
                response.data.forEach((item) => {
                    if (
                        ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.storage_type.push(item);
                    }
                    if (["spycc2"].indexOf(item.code) < 0) {
                        this.configure.ccList.push(item);
                    }
                    if (
                        ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                            item.code
                        ) < 0
                    ) {
                        this.configure.fwcpList.push(item);
                    }
                });
            });
            //操作系统
            serviceByClazz({ code: "czxt" }).then((response) => {
                this.configure.czxtList = response.data;
            });
            //云服务器规格列表
            listByCode("spec_ecs").then((response) => {
                this.configure.codeList = response.data;
            });
            //高性能服务器资源类型列表
            serviceByClazz({ code: "wlfwq" }).then((response) => {
                this.configure.wlfwqList = response.data;
            });
            //数据库类型列表
            serviceByClazz({ code: "sjk" }).then((response) => {
                this.configure.sjkList = response.data;
            });
            //安全产品列表
            serviceByClazz({ code: "yyaq" }).then((response) => {
                this.configure.yyaqList = response.data;
            });
        },
        next() {
            this.$refs.cloudSystem.validate((valid) => {
                if (valid) {
                    this.users.some((item) => {
                        if (item.userId == this.cloudSystem.contacts) {
                            this.cloudSystem.contactsNickName = item.nickName;
                            return true;
                        }
                    });
                    // this.$emit("next", this.cloudSystem);
                    if (this.cloudSystem.fundFromRadio == "1") {
                        this.cloudSystem.fundFrom = "区（县）";
                    } else if (this.cloudSystem.fundFromRadio == "2") {
                        this.cloudSystem.fundFrom = "市级";
                    }

                    this.$confirm("是否确认提交?", "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        addCloudUp(this.cloudSystem)
                            .then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                                this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length-1].path)
                            })
                            .finally(() => {
                            });
                    });
                } else {
                    return false;
                }
            });
        },
        cancel(){
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length-1].path)
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.cloudSystem.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        //业务部门变化
        deptChange(e) {
            this.users = [];
            this.cloudSystem.contacts = "";
            this.cloudSystem.officeId = "";
            if (e.length) {
                this.cloudSystem.officeId = e[e.length - 1];
                this.getName(this.dept, this.cloudSystem.officeId);
                listUser2({
                    deptId: this.cloudSystem.officeId,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        handleCheckAllChange(val) {
            this.checked = val ? this.options : [];
            this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.options.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.options.length;
        },
        //清空
        reset() {
            this.$refs.cloudSystem.resetFields();
        },
    },
};
</script>
<style scoped lang="less">
.dialog {
    margin-bottom: 30px;
    font-size: 12px;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }

    .msg {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        border-radius: 10px;

        .wrap {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            margin-left: 20px;
            width: calc(33.33% - 20px);
            min-width: 340px;
            display: flex;
        }
    }
}
</style>
